<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <Header 
      @openRegister="showRegisterModal = true" 
      @openLogin="showLoginModal = true"
    />
    
    <!-- 作品管理内容 -->
    <div class="works-manage-page">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="sidebar-content">
          <div 
            v-for="item in menuItems" 
            :key="item.key"
            :class="['menu-item', { active: activeMenu === item.key }]"
            @click="handleMenuClick(item.key)"
          >
          <span class="menu-text">
            {{ item.label }}
            <span v-if="item.hasDot" class="menu-dot"></span>
          </span>
          </div>
        </div>
      </div>
      
      <!-- 右侧主要内容区域 -->
      <div class="main-content">
      <!-- 顶部状态栏 -->
      <div class="status-tabs">
        <div 
          v-for="tab in statusTabs" 
          :key="tab.key"
          :class="['status-tab', { active: activeTab === tab.key }]"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
          <span class="tab-count">({{ tab.count }})</span>
        </div>
      </div>
      
      <!-- 标题和说明 -->
      <div class="header-section">
        <div class="title-row">
          <h1 class="main-title">一次创作 / 终生收益 / 天天收益</h1>
          <button class="read-btn" @click="showReadModal = true">上传必读</button>
        </div>
        <div class="instruction-text">
          <p>禁止上传第三方素材网站模板,且含有第三方诱导性广告信息的作品文件,多软件设计作品可一起打包上传(RAR/ZIP/7Z),单次上传作品不大于100个<span class="example-link">(点击示例)</span></p>
          <p>建议上传低版本源文件,可提高下载量和降低投诉率。</p>
        </div>
      </div>
      
      <!-- 上传按钮 -->
      <div class="upload-section">
        <button class="upload-btn">
          <span class="upload-icon">+</span>
          <span>上传作品</span>
        </button>
      </div>
      
      <!-- 文件上传状态列表 -->
      <div class="upload-list">
        <div 
          v-for="(file, index) in uploadFiles" 
          :key="index"
          :class="['upload-item', { error: file.status === 'error' }]"
        >
          <div class="file-info-row">
            <span :class="['file-name', { error: file.status === 'error' }]">{{ file.name }}</span>
            <span :class="['separator', { error: file.status === 'error' }]">|</span>
            <span :class="['file-size', { error: file.status === 'error' }]">{{ file.size }}</span>
            <span :class="['separator', { error: file.status === 'error' }]">|</span>
            <span :class="['progress-text', { error: file.status === 'error' }]">{{ file.progress }}%</span>
          </div>
          <div class="upload-progress-row">
            <div class="progress-bar">
              <div 
                :class="['progress-fill', { error: file.status === 'error', uploading: file.status === 'uploading' }]"
                :style="{ width: file.progress + '%' }"
              ></div>
            </div>
            <div class="status-icon">
              <img v-if="file.status === 'success'" :src="successIcon" alt="成功" class="status-icon-img">
              <img v-else-if="file.status === 'error'" :src="errorIcon" alt="错误" class="status-icon-img">
              <img v-else-if="file.status === 'uploading'" :src="errorIcon" alt="上传中" class="status-icon-img">
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <div class="pagination">
          <button class="page-btn active">1</button>
          <button class="page-btn">2</button>
          <button class="page-btn">3</button>
          <button class="page-btn">4</button>
          <button class="page-btn">5</button>
          <button class="page-btn">6</button>
          <button class="page-btn">7</button>
          <button class="page-btn">8</button>
          <button class="page-btn">9</button>
          <button class="page-btn">10</button>
          <span class="pagination-ellipsis">...</span>
          <button class="page-btn">9999</button>
          <input type="text" class="page-input" placeholder="">
          <button class="jump-btn">跳转</button>
        </div>
        <button class="submit-btn">提交作品</button>
      </div>
    </div>
    </div>
    
    <!-- 页脚 -->
    <Footer />
    
    <!-- 注册弹窗 -->
    <RegisterModal 
      :visible="showRegisterModal" 
      @close="showRegisterModal = false"
      @switchToLogin="handleSwitchToLogin"
    />
    
    <!-- 登录弹窗 -->
    <LoginModal 
      :visible="showLoginModal" 
      @close="showLoginModal = false"
      @switchToRegister="handleSwitchToRegister"
    />
    
    <!-- 上传必读弹窗 -->
    <div v-if="showReadModal" class="read-modal-overlay" @click.self="showReadModal = false">
      <div class="read-modal">
        <div class="read-modal-header">
          <h3 class="read-modal-title">作品上传须知</h3>
          <button class="read-modal-close" @click="showReadModal = false">
            <img :src="closeIcon" alt="关闭" class="close-icon-img">
          </button>
        </div>
        <div class="read-modal-content">
          <p>尊敬的用户:</p>
          <p>感谢您一直以来对。自2021年10月正式上线以来MasterGo(莫高设计)始终致力于为用户提供高质量的数字产品设计和产设研协作体验</p>
          <p class="highlight-text">我们心怀感恩,秉承负责任的态度,特此通知您一项即将实施的重要方案</p>
          <p>将于2024年9月26日正式推出完整的商业化版本和定价,包括初创版免费)、团队版、企业版和私有化版。这一调整旨在更好地满足不同类型用户的需求,持续为您提供高质量的专业服务。</p>
          <p>将于2024年9月26日正式推出完整的商业化版本和定价,包括初创版免费)、团队版、企业版和私有化版。这一调整旨在更好地满足不同类型用户的需求,持续为您提供高质量的专业服务。</p>
          <p>将于2024年9月26日正式推出完整的商业化版本和定价,包括初创版免费)、团队版、企业版和私有化版。这一调整旨在更好地满足不同类型用户的需求,持续为您提供高质量的专业服务。</p>
        </div>
        <div class="read-modal-footer">
          <button class="acknowledge-btn" @click="showReadModal = false">我已知晓</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/src/components/Header.vue'
import Footer from '@/src/components/Footer.vue'
import RegisterModal from '@/src/components/RegisterModal.vue'
import LoginModal from '@/src/components/LoginModal.vue'

export default {
  name: 'WorksManage',
  components: {
    Header,
    Footer,
    RegisterModal,
    LoginModal
  },
  data() {
    return {
      showRegisterModal: false,
      showLoginModal: false,
      showReadModal: false,
      activeMenu: 'works',
      activeTab: 'onshelf',
      successIcon: require('~/assets/images/img/A-2-1-PC登陆-注册_slices/符号组合.png'),
      errorIcon: require('~/assets/images/img/D-1作品管理-上传列表_slices/符号组合(3).png'),
      closeIcon: require('~/assets/images/img/A-2-1-PC登陆-注册_slices/关闭.png'),
      menuItems: [
        { key: 'works', label: '作品管理', hasDot: false },
        { key: 'account', label: '账户管理', hasDot: false },
        { key: 'collection', label: '我的收藏', hasDot: false },
        { key: 'purchase', label: '购买记录', hasDot: false },
        { key: 'settings', label: '个人设置', hasDot: false },
        { key: 'message', label: '消息通知', hasDot: true },
        { key: 'points', label: '积分兑换', hasDot: false },
        { key: 'recharge', label: '充值中心', hasDot: false },
        { key: 'rules', label: '网站规则', hasDot: false }
      ],
      statusTabs: [
        { key: 'onshelf', label: '已上架', count: 9999999 },
        { key: 'pending', label: '待提交', count: 100 },
        { key: 'reviewing', label: '审核中', count: 999 },
        { key: 'adjust', label: '需调整', count: 999 },
        { key: 'rejected', label: '未通过', count: 999 }
      ],
      uploadFiles: [
        { name: '20240108公园价值单图B_001.rar', size: '548M', progress: 100, status: 'success' },
        { name: '20240108公园价值单图B_002.rar', size: '548M', progress: 100, status: 'success' },
        { name: '20240108公园价值单图B_003.rar', size: '548M', progress: 100, status: 'success' },
        { name: '20240108公园价值单图B_004.rar', size: '548M', progress: 100, status: 'error' },
        { name: '20240108公园价值单图B_005.rar', size: '548M', progress: 100, status: 'success' },
        { name: '20240108公园价值单图B_006.rar', size: '548M', progress: 100, status: 'success' },
        { name: '20240108公园价值单图B_007.rar', size: '548M', progress: 45, status: 'uploading' },
        { name: '20240108公园价值单图B_008.rar', size: '548M', progress: 30, status: 'uploading' },
        { name: '20240108公园价值单图B_009.rar', size: '548M', progress: 15, status: 'uploading' }
      ]
    }
  },
  methods: {
    handleMenuClick(key) {
      this.activeMenu = key
      // 这里可以添加其他菜单项的跳转逻辑
    },
    handleSwitchToLogin() {
      this.showRegisterModal = false
      this.showLoginModal = true
    },
    handleSwitchToRegister() {
      this.showLoginModal = false
      this.showRegisterModal = true
    }
  }
}
</script>

<style scoped>
.works-manage-page {
  display: flex;
  min-height: 60vh;
  background: #F5F5F5;
  padding: 0 50px;
  margin-top: 20px;
}

/* 左侧导航栏 */
.sidebar {
  width: 230px;
  background: white;
  padding: 40px 0;
  border-radius: 8px;
  height: fit-content;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
}

.menu-item {
  padding: 20px;
  font-size: 16px;
  color: #2E2E30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.menu-item:hover {
  color: #19D8B6;
}

.menu-item.active {
  background: #19D8B6;
  color: white;
  border-radius: 100px;
  margin: 0 15px;
  padding: 10px 20px;
  width: calc(100% - 30px);
  display: inline-flex;
}

.menu-text {
  position: relative;
  text-align: center;
  display: inline-block;
}

.menu-dot {
  position: absolute;
  top: 2px;
  right: -8px;
  width: 4px;
  height: 4px;
  background: #FC952F;
  border-radius: 50%;
}

/* 右侧主要内容 */
.main-content {
  flex: 1;
  background: white;
  padding: 20px 40px 150px;
  margin-left: 20px;
  border-radius: 4px;
}

/* 顶部状态栏 */
.status-tabs {
  display: flex;
  gap: 50px;
  margin-bottom: 70px;
  padding-bottom: 10px;
  position: relative;
}

.status-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -40px;
  right: -40px;
  height: 1px;
  background: #E0E0E0;
}

.status-tab {
  font-size: 16px;
  color: #2E2E30;
  cursor: pointer;
  padding-bottom: 10px;
  position: relative;
}

.status-tab:hover {
  color: #19D8B6;
}

.status-tab.active {
  color: #19D8B6;
}

.status-tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 2px;
  background: #19D8B6;
}

.tab-count {
  margin-left: 4px;
  color: #B3B3B3;
}

/* 标题和说明 */
.header-section {
  margin-bottom: 20px;
  text-align: center;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  gap: 20px;
}

.main-title {
  font-size: 32px;
  font-weight: 300;
  color: #2E2E30;
  margin: 0;
}

.read-btn {
  padding: 2px 12px;
  background: white;
  color: #19D8B6;
  border: 1px solid #19D8B6;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.read-btn:hover {
  background: #19D8B6;
  color: white;
}

.instruction-text {
  font-size: 14px;
  color: #666;
  line-height: 2.6;
  text-align: center;
}

.example-link {
  color: #19D8B6;
  cursor: pointer;
}

.instruction-text p {
  margin: 5px 0;
}

/* 上传按钮 */
.upload-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: #19D8B6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.upload-btn:hover {
  background: #00C099;
}

.upload-icon {
  font-size: 20px;
}

/* 文件上传列表 */
.upload-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.upload-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.file-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-name {
  font-size: 14px;
  color: #2E2E30;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-name.error {
  color: #FF5967;
}

.separator {
  color: #2E2E30;
  font-size: 14px;
  flex-shrink: 0;
}

.separator.error {
  color: #FF5967;
}

.file-size {
  font-size: 12px;
  color: #2E2E30;
  flex-shrink: 0;
}

.file-size.error {
  color: #FF5967;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.progress-text.error {
  color: #FF5967;
}

.upload-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #F8F8F8;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #19D8B6;
  border-radius: 3px;
}

.progress-fill.error {
  background: #FF5967;
}

.progress-fill.uploading {
  background: #19D8B6;
}

.status-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.status-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 分页 */
.pagination-wrapper {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  background: white;
  color: #666;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover {
  border-color: #19D8B6;
  color: #19D8B6;
}

.page-btn.active {
  background: #2E2E30;
  color: white;
  border-color: #2E2E30;
}

.pagination-ellipsis {
  color: #999;
  font-size: 14px;
  padding: 0 4px;
}

.page-input {
  width: 60px;
  height: 32px;
  border: 1px solid #B3B3B3;
  border-radius: 126px;
  padding: 0 8px;
  font-size: 14px;
  text-align: center;
  margin-left: 8px;
}

.page-input:focus {
  outline: none;
  border-color: #19D8B6;
}

.jump-btn {
  height: 32px;
  padding: 0 16px;
  background: white;
  color: #2E2E30;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-left: 8px;
}

.jump-btn:hover {
  border-color: #19D8B6;
  color: #19D8B6;
}

.submit-btn {
  padding: 12px 28px;
  background: #19D8B6;
  color: white;
  border: none;
  border-radius: 182px;
  font-size: 14px;
  cursor: pointer;
}

.submit-btn:hover {
  background: #00C099;
}

/* 上传必读弹窗 */
.read-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.read-modal {
  background: white;
  border-radius: 8px;
  width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.read-modal-header {
  background: #2E2E30;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.read-modal-title {
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.read-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.read-modal-content {
  padding: 30px;
  flex: 1;
  overflow-y: auto;
  font-size: 14px;
  color: #2E2E30;
  line-height: 1.8;
}

.read-modal-content p {
  margin: 0 0 15px 0;
}

.read-modal-content p:last-child {
  margin-bottom: 0;
}

.highlight-text {
  color: #19D8B6;
}

.read-modal-footer {
  padding: 20px 30px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #E0E0E0;
}

.acknowledge-btn {
  padding: 10px 32px;
  background: #19D8B6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.acknowledge-btn:hover {
  background: #00C099;
}
</style>

